<template>
  <div class="daily-recommand">
    <div v-if="isLogin" class="mainbox">
      <div class="song-list">
        <div class="bgImage">
          <div class="content" v-if="songList.length">
            <img :src="songList[0].picUrl" alt="">
          </div>
          <div class="bar">
            <div class="left" @click="back">
              <img src="../../../assets/img/common/back_white.svg" alt="">
            </div>
            <div class="right">
              <div class="right-left">
                <img src="../../../assets/img/common/search_white.svg" alt=""
                  @click="searchClick">
              </div>
              <div class="right-right">
                <img src="../../../assets/img/common/menu_white.svg" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="bottom">
          <div class="top">
            <div class="font">
              <div class="angle">
                <div class="angles"></div>
              </div>
              <p>播放全部</p>
            </div>
          </div>
          <ul class="box">
            <li v-for="(item,index) of songList" :key="index"
                class="liItem" @click="choose(item.id,index)">
              <div class="box-num">
                <p>{{index + 1}}</p>
              </div>
              <div class="box-name">
                <div class="name-top">
                  <p>{{item.songName}}</p>
                  <p class="top-bottom">{{item.alia}}</p>
                </div>
                <div class="name-bottom">
                  <p>{{item.singerName}} - {{item.zjName}}</p>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>

    </div>
    <div v-else>
      <login></login>
    </div>
  </div>
</template>

<script>
  import Login from "../login/Login";
  import {getdailyrecommand} from "../../../network/dailyrecommand";
  import {getSongsUrl} from "../../../network/songsheet";

  export default {
        name: "DailyRecommand",
        components:{
            Login,
        },
        data(){
            return{
                isLogin:false,
                userDetail:{},
                picUrl:'',
                songName:'',
                id:0,
                singerName:'',
                zjName:'',
                music:{},
                songList:[],
            }
        },
        created() {
            // console.log(typeof this.$store.state.userInfo)
            var type = typeof this.$store.state.userInfo
            if(type == 'object'){
                this.userDetail = this.$store.state.userInfo
                var length = Object.keys(this.$store.state.userInfo).length
                if(length){
                    this.isLogin = true
                    this.getRecommand()
                }
            }else{
                if(this.$store.state.userInfo.length !== 0){
                    this.userDetail = JSON.parse(this.$store.state.userInfo)
                    // console.log(this.userDetail)
                    this.isLogin = true
                    this.getRecommand()
                }
            }
        },
      methods:{
          back(){
              this.$router.back();
          },
          choose(id,index){
              // console.log(this.songList[index].id)
              getSongsUrl(this.songList[index].id).then(res=>{
                  // console.log(res.data.data[0].url)
                  this.url = res.data.data[0].url
              })
              // 这里要设置延时执行否则第一次点击的时候拿不到歌曲链接
              setTimeout(()=>{
                  this.$store.dispatch('AddMusic',
                      {
                          url:this.url,
                          songItem:this.songList[index],
                          index:index
                      }).then(res=>{
                      // console.log(res)
                  })
              },800)
              //   底部显示播放控件
              this.$store.commit('showplayer')
              //    改变暂停和播放图标
              if(!this.$store.state.pause){
                  this.$store.commit('play')
              }
          },
          getRecommand(){
              getdailyrecommand().then(res=>{
                  for(let item of res.data.data.dailySongs){
                      this.picUrl = item.album.picUrl
                      this.songName = item.name
                      this.id = item.id
                      this.singerName = item.artists[0].name
                      this.zjName = item.album.name
                      this.music = {
                          picUrl:this.picUrl,
                          singerName:this.singerName,
                          songName:this.songName,
                          id:this.id,
                          zjName:this.zjName,
                      }
                      this.songList.push(this.music)
                  }

              })
          },
          searchClick(){
            this.$router.push('/search')
          },
      },

  }
</script>

<style scoped>
  .daily-recommand{
    position: relative;
    z-index: 10;
    width: 100%;
  }

  .mainbox{
    width: 100%;
    position: absolute;
  }

  .song-list{

  }

  .bgImage{
    z-index: 9;
    position: relative;
    top: -44px;
  }

  .content{
    height: 300px;
    overflow: hidden;
  }

  .bgImage img{
    width: 100%;
  }

  .bar{
    height: 44px;
    position: fixed;
    top: 25px;
    width: 100%;
    z-index: 10;
  }

  .left{
    padding-left: 20px;
  }

  .left img{
    width: 25px;
    height: 25px;
  }

  .right{
    padding-right: 20px;
  }

  .right-left{
    display: inline;
    padding-right: 10px;
  }

  .right-left img{
    width: 25px;
    height: 25px;
  }

  .right-right{
    display: inline;
  }

  .right img{
    width: 25px;
    height: 25px;
  }

  .bottom{
    width: 100%;
    background-color: #F1EFF1;
    border-radius: 10px;
    position: absolute;
    z-index: 9;
    top: 300px;
    font-size: 15px;
    font-weight: 400;
  }

  .top{
    height: 50px;
    margin-top: -43px;
    background-color: #F1EFF1;
    border-radius: 15px 15px 0 0;
  }

  .font{
    line-height: 36px;
    margin-left: 5px;
    font-size: 14px;
  }

  .font p{
    padding-top: 6px;
  }

  .angle{
    float: left;
    width: 15px;
    height: 15px;
    border: 1px solid #000;
    border-radius: 7px;
    margin-top: 16px;
    margin-left: 15px;
    margin-right: 6px;
  }

  .angles{
    border-top: 4px solid transparent;
    border-left: 5px solid #000;
    border-bottom: 3px solid transparent;
    margin-left: 5px;
    margin-top: 3px;
  }

  .box{
    display: block;
  }

  .liItem{
    display: flex;
    margin-bottom: 22px;
  }

  .box-num{
    width: 15px;
    color: #D6D8D6;
    margin-left: 12px;
    margin-right: 12px;
    text-align: center;
    margin-top: 5px;
  }

  .name-top{
    width: 98%;
    font-size: 14px;
    font-weight: 600;
  }

  .name-top p{
    display: inline;
  }

  .top-bottom{
    margin-left: 10px;
  }

  .name-bottom{
    font-size: 12px;
    font-weight: normal;
    margin-top: 8px;
  }

  li:nth-child(-n+3) .box-num{
    color: #F7A5A6
  }





</style>